.xiaoxiaole {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  position: relative;
}
.info {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.time {
  width: 320rpx;
  height: 60rpx;
  margin-right: 40rpx;
  background: #ffc71c;
  border-radius: 30rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  text {
    font-size: 32rpx;
    color: #fff;
    font-weight: 700;
  }
}
.process {
  width: 200rpx;
  height: 60rpx;
  margin-left: 40rpx;
  background: #ffc71c;
  border-radius: 60rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  text {
    font-size: 42rpx;
    font-weight: 700;
    color: #ffffff;
  }
}
.content {
  width: 100%;
  padding: 0 40rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .content_text {
    flex: 2;
    height: 80rpx;
    margin-right: 40rpx;
    padding: 0 20rpx;
    background: #ffc71c;
    border-radius: 18rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    &:last-child {
      flex: 1;
      margin-right: 0;
    }
    text {
      font-size: 32rpx;
      color: #ffffff;
    }
    input {
      width: 100%;
      font-size: 32rpx;
      color: #ffffff;
      text-align: center;
    }
  }
}
.options {
  width: 100%;
  padding: 0 40rpx;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  .options_content {
    width: 176rpx;
    height: 176rpx;
    margin-bottom: 12rpx;
    .options_img {
      width: 100%;
      height: 100%;
      background: #fff;
      border-radius: 12rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      &.active {
        background-color: #00a0e9;
      }
      image {
        display: block;
        height: 80rpx;
      }
    }
    .options_text {
      width: 100%;
      height: 100%;
      background: #fff;
      border-radius: 12rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 84rpx;
      color: #ffc71c;
      &.active {
        visibility: hidden;
      }
    }
  }
}
.word {
  width: 100%;
  padding: 0 40rpx;
  position: relative;
}
.word_container {
  width: 100%;
  padding: 40rpx;
  border-radius: 40rpx;
  background-color: #81b7ff;
  box-shadow: 10rpx 10rpx 0px 0px rgba($color: #81b7ff, $alpha: 0.5);
  overflow-y: auto;
}
.word_content {
  width: 100%;
  height: 544rpx;
  overflow-y: auto;
}
.word_box {
  width: 100%;
  height: 60rpx;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  &:nth-child(2n) {
    background: #ffffff;
  }
  &:nth-child(2n + 1) {
    background: #fcf38a;
  }
  &.word_title {
    background: #faea18;
    .word_text {
      font-size: 28rpx;
      color: #333;
      font-weight: 700;
    }
  }
  .word_text {
    display: flex;
    justify-content: center;
    align-items: center;
    text {
      font-size: 28rpx;
      color: #333;
    }
    image {
      width: 48rpx;
    }
    &:nth-child(1) {
      flex: 3;
    }
    &:nth-child(2) {
      flex: 3;
    }
    &:nth-child(3) {
      flex: 2.5;
    }
    &:nth-child(4) {
      flex: 1.5;
    }
  }
}
.word_button {
  width: 308rpx;
  margin: 20rpx auto 0;
  image {
    width: 100%;
  }
}
.popup_container {
  width: 686rpx;
  padding-top: 60rpx;
  padding-bottom: 20rpx;
  border-radius: 40rpx;
  background: #ffd541;
  box-shadow: 10rpx 10rpx 0px 0px rgba($color: #ffd541, $alpha: 0.5);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
.popup_content {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .popup_img {
    width: 160rpx;
    height: 160rpx;
    margin-right: 30rpx;
    image {
      width: 100%;
    }
  }
  .popup_info {
    width: auto;
    margin-left: 30rpx;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    .popup_info_con {
      font-size: 44rpx;
      color: #81b7ff;
      font-weight: 700;
      line-height: 64rpx;
    }
  }
}
.popup_button {
  width: 300rpx;
  margin-top: 20rpx;
  image {
    width: 100%;
  }
}
